<template class="box">
    <el-config-provider :locale="locale">
      <h type="text"  style="font-size: 30px;"   class="aa">课程:Spring Boot框架</h>
            <div >
               <h style="text-align: center; font-size: 20px; margin-left: 600px;">{{ $t('course.catalog')}}</h>
               <a  class="btn" style="margin-top: -14px;margin-left: 613px;" title="新增" @click="add(this.menuList)"><el-icon><Plus/></el-icon>{{$t('course.crouse4')}} </a>
            </div>
      <div style="overflow: auto;height: 600px;">
         <el-tree
            ref="treeRef"
            :data="menuList"
            node-key="id"
            default-expand-all
            :props="defaultProps"> 
            <template #default="{node}">
               <span class="custom-tree-node">
                  <span>{{ node.label }}</span>
                  <span>
                     <a  class="btn" title="增加" @click="append(node)"><el-icon><Plus/></el-icon> </a>
                     <a class="btn" title="删除" style="margin-left: 8px" @click="remove(node)"> <el-icon><Delete/></el-icon> </a>
                  </span>
               </span>
            </template>
         </el-tree>
      </div>
   </el-config-provider>
      </template>
 <script>
 import {Plus,Delete} from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
    toRefs,
    reactive,
  }
  from 'vue'
     export default {
      name: '',
      props:[""],
      components:{
         Plus,
         Node,
         Delete
      },
      setup() {
         const state = reactive({
         formData: {
            pid: "",
            name: "",
            sort:''
         },
         pid:{
            userUuids:""
           }
         })
         return {
         ...toRefs(state),
         }
      },
      data: function(){
        return {
           menuList:[],
           defaultProps : {
                children: 'children',
                label: 'label',
            },
        }
      },
      methods:{
         queryCatalogueData(){
            var that = this;
             window.http.post('/api/catalogue/queryMenuTree',this.formData).then(res => {
                var data = res.data;
                that.menuList = data;
             }) 
             .catch(function(error){
                that.$message.error('服务器异常');
             });
             window.http.post('/api/catalogue/queryCatalogueTotal',this.formData).then(res => {
                var data = res.data;
                if(data.success){
                 that.total = data.total;
                }
             }) 
             .catch(function(error){
                that.$message.error('服务器异常');
             })
         },
         handleSizeChange(){
              this.queryCatalogueData();
          },
          handleCurrentChange(){
              this.queryCatalogueData();
          },
          append(node){
            var that = this;
            if(node.childNodes.length==0){
               this.formData.pid=node.data.id;
               this.formData.sort='1';
            }else{
               this.formData.pid=node.childNodes[node.childNodes.length-1].data.pId;
               this.formData.sort=node.childNodes.length+1;
            }
            ElMessageBox.prompt('请输入要插入的章节名', '插入', {
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            }).then(({ value }) => {
               this.formData.name=value
               ElMessage({
               type: 'success',
               message: `新增章节:${value}`,
               })
               window.http.post('/api/catalogue/insertChapter',this.formData).then(res => {
                var data = res.data;
                console.log(data)
             }) 
             .catch(function(error){
                that.$message.error('服务器异常');
             })
            })
            .catch(() => {
               ElMessage({
               type: 'info',
               message: 'Input canceled',
               })
            })
          },
          add(menuList){
            var that = this;
            this.formData.pid='0';
            this.formData.sort=this.menuList.length-1;
            ElMessageBox.prompt('请输入要插入的章节名', '插入', {
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            }).then(({ value }) => {
               this.formData.name=value
               ElMessage({
               type: 'success',
               message: `新增章节:${value}`,
               })
               window.http.post('/api/catalogue/insert',this.formData).then(res => {
                var data = res.data;
                console.log(data)
             }) 
             .catch(function(error){
                that.$message.error('服务器异常');
             })
            })
            .catch(() => {
               ElMessage({
               type: 'info',
               message: 'Input canceled',
               })
            })
          },
          getid(nums){
            if(nums.childNodes==null){
               this.pid.userUuids+=nums[0].data.id;
               this.pid.userUuids +=","
            }else{
               this.pid.userUuids+=nums.data.id;
               this.pid.userUuids +=","
               for(var i=0;i<nums.childNodes.length;i++){
                  this.getid(nums.childNodes[i]);
               }
            }
          },
          remove(node){
            var that= this;
            this.getid(node);
            window.http.post('/api/catalogue/delete',this.pid).then(res => {
                var data = res.data;
                if(data.success){
                  that.$message.success('删除成功');
                }
             }) 
             .catch(function(error){
                that.$message.error('服务器异常');
             })
          }
      },
      mounted(){
          var app =document.getElementById("app");
          this.height=app.clientHeight-190;
          this.queryCatalogueData();
      },
                }
 </script>
 <style>
   html,
   body, 
   #app{
     height: 100%;
     width: 100%;
   }
 </style>
 <style scoped>
    .container {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
   }
    .tr{
       width: 100%;
       flex-basis: 50px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       background-color: beige;
       align-items: center;
     }
    .second{
       background-color: aqua;
    }
    .aa{
      margin-left: 555px;
    }
    .btn{
      margin-right: 10px;
      margin-left: 679px;
    }
    
 </style>
